<template>
  <div class="rights">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="bread">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 权限列表数据 -->
    <el-table :data="rightList" border style="width: 100%" class="mt-15" v-loading="loading">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="authName" label="权限名称"></el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
      <el-table-column label="层级">
         <!-- 为了使用过滤器，这里改成作用域插槽 -->
         <template slot-scope="scope">
            <el-tag :type="getType(scope.row.level)">{{scope.row.level | fmtLevel}}</el-tag>
         </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getRightsList } from '@/api'
export default {
  data () {
    return {
      loading: true,
      rightList: []
    }
  },
  created () {
    this.initTable()
  },
  filters: {
    fmtLevel (level) {
      if (level === '0') {
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else {
        return '三级'
      }
    }
  },
  methods: {
    initTable () {
      this.loading = true
      getRightsList('list').then(res => {
      //   console.log(res.data.data)
        this.rightList = res.data.data
        this.loading = false
      })
    },
    getType (level) {
      if (level === '0') {
        return 'success'
      } else if (level === '1') {
        return 'info'
      } else {
        return 'warning'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
   .bread {
    padding: 10px;
    background-color: #f5f5f5;
  }
</style>
